import React, { Component } from "react";
import itemcss from "./index.module.css";

export default class index extends Component {
  // 是否移入状态
  state = {
    flag: false,
  };
  // 鼠标的移入移出事件
  handerEnter = (flag) => {
    return () => {
      this.setState({
        flag: flag,
      });
    };
  };
  // 切换选中框触发
  changeChecked(id) {
    return (event) => {
      // 调用父组件的方法更新数据
      this.props.updateTodo(id, event.target.checked);
    };
  }
  // 删除一个todo
  deleteItem = (id) => {
    return () => {
      // 询问用户是否删除
      if (window.confirm("是否删除")) {
        this.props.deleteTodo(id);
      }
    };
  };

  render() {
    // 从List组件中接收todo中的每一项内容
    const { id, name, done } = this.props;
    const { flag } = this.state;
    return (
      <li
        style={{ backgroundColor: flag ? "#ddd" : "white" }}
        onMouseEnter={this.handerEnter(true)}
        onMouseLeave={this.handerEnter(false)}
        className={itemcss.itemMain}
      >
        <input
          type="checkbox"
          checked={done}
          onChange={this.changeChecked(id)}
        />
        <div>{name}</div>
        <button
          style={{ display: flag ? "block" : "none" }}
          className={itemcss.deleteBtn}
          onClick={this.deleteItem(id)}
        >
          删除
        </button>
      </li>
    );
  }
}
